<template>
  <div style="width: 100%;height: 100%;">
    <div class="all"></div>
    <!--布局-->
    <!--  顶部布局-->
    <!-- <div class="box3">

      <el-button><i class="el-icon-s-home">首页</i></el-button>
      <el-button><i class="el-icon-user-solid">退出登录</i></el-button>

    </div> -->

    <!--    底部布局-->
    <div class="box2">
      <router-view></router-view>
    </div>


    <!--   中部布局 -->
    <div class="box"></div>

    <!--左下布局-->
    <div class="box4">
      <el-row>
        <el-button @click="jump" type="warning" class="el-icon-star-off" circle></el-button>
      </el-row>


      <el-row>
        <el-button @click="jump2" class="el-icon-upload" circle></el-button>
      </el-row>



    </div>


    <!--左上布局-->
    <div class="box5">
      <!-- <img :src="infoForm.img" height="200px" width="200px"> -->
      <el-avatar :size="150" :src="infoForm.img" />
    </div>


    <!--  上传头像-->
    <!-- <div class="box6">

      <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="infoForm.img" :src="infoForm.img" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div> -->


    <div id="Card">
      <ul>
        <li>ID:{{ infoForm.id }}</li>
        <li>Email:{{ infoForm.email }}</li>
        <li>昵称:{{ infoForm.name }}</li>
        <li>性别:{{ infoForm.sex }}</li>
        <li>年龄:{{ infoForm.age }}</li>
        <li>民族:{{ infoForm.ethnic }}</li>
      </ul>
    </div>

    <div id="button">
      <el-button @click="show3 = true"> <i class="el-icon-edit">修改信息</i></el-button>

      <el-collapse-transition>
        <div v-show="show3">
          <div class="transition-box">
            <!-- <el-form :model="infoForm" :rules="rules">
                    <el-form-item prop="email">
                        <el-input style="height: 40px;" v-model="form.email" placeholder="输入您的邮箱">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input style="height: 40px;" v-model="form.code" placeholder="输入邮箱验证码" clearable>

                            <template #suffix>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 0"
                                    @click="validation">获取验证码</el-button>
                                <el-button :type="primary" text style="border: none;color: gray;" v-if="isShow === 1"
                                    disabled>{{ time }}秒</el-button>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 2"
                                    @click="validation">重新获取</el-button>
                            </template>
</el-input>
</el-form-item>
<el-form-item prop="password">
  <el-input style="height: 40px;" v-model="form.newPsd" placeholder="输入新的密码" clearable />
</el-form-item>
<el-form-item prop="rePassword">
  <el-input style="height: 40px;" v-model="form.rePassword" placeholder="再次输入密码" clearable />
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="put" style="width: 100%;padding: 20px;font-size:20px;margin-top: 20px;">提
    交</el-button>
</el-form-item>
</el-form> -->

            ID: &nbsp&nbsp&nbsp&nbsp&nbsp<input v-model="infoForm.id" :disabled="true" placeholder=""></input><br><br>
            邮箱:&nbsp&nbsp<input type="email" v-model="infoForm.email" placeholder="请输入Email"
              @blur="OnSubscribe"></input><br><br>
            昵称:&nbsp&nbsp<input v-model="infoForm.name" placeholder="昵称"></input><br><br>
            性别:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{ infoForm.sex }}
            <!-- <el-radio v-model="infoForm.sex" label="男">男</el-radio>
            <el-radio v-model="infoForm.sex" label="女">女</el-radio> -->
            <br><br>
            年龄:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input v-model="infoForm.age" placeholder="年龄"></input><br><br>
            民族:&nbsp&nbsp<el-select v-model="infoForm.ethnic" placeholder="请选择您的民族" size="small" style="width:170px">
              <el-option v-for="item in nationalities" :label="item" :value="item" />
            </el-select><br><br>
            <div v-show="show3">
              <el-button @click="onclick" plain="true" type="success" :icon="Check" circle></el-button>
            </div>

          </div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>


<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import { userInfoService, updateUserService, newTokenService } from '@/api/user'
import { ElMessage } from 'element-plus';
import { getAllEthnicService } from '@/api/ethnic'

// export default {
// methods: {
//邮箱输入格式
const OnSubscribe = () => {
  const verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
  if (!verify.test(infoForm.email)) {
    ElMessage.error("邮箱格式错误")
    show.value = false
  }
  //   this.$message({
  //     message: '请输入正确的邮箱格式',
  //     type: 'error',

  //   });
  //   show = false
  // } else {
  //   this.show = true
  // }
}

//上传头像
const handleAvatarSuccess = (res, file) => {
  this.imageUrl = URL.createObjectURL(file.raw);

}
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
}


//收藏跳转
const jump = () => {
  this.$router.push('/jump');
}
//作品跳转
const jump2 = () => {
  this.$router.push('/jump2');
}


const onclick = async () => {
  // show3 = !this.show3
  // {
  //   this.$message({
  //     message: '修改成功！',
  //     type: 'success',

  //   });
  // }
  await updateUserService(infoForm)
  ElMessage.success("更新用户成功")
  let res = await newTokenService()
  localStorage.setItem('Authorization', res.data)
  getInfo()
  show3.value = false
}



const infoForm = reactive({
  id: '',
  name: '',
  email: '',
  sex: '',
  age: null,
  ethnic: '',
  img: ''
})

const nationalities = ref([])

async function getInfo() {
  let result = await userInfoService()
  let res = await getAllEthnicService()

  nationalities.value = res.data
  console.log(res.data)

  infoForm.id = result.data.id
  infoForm.name = result.data.name
  infoForm.email = result.data.email
  infoForm.sex = result.data.sex
  infoForm.age = result.data.age
  infoForm.ethnic = result.data.ethnic
  infoForm.img = result.data.img
}

getInfo()

const show3 = ref(false)
// name: "PersonCentre",
// data() {
//   return {
//     el: '#Card',
//     ID: '001',
//     email: '1653687059@qq.com',
//     Name: '邓昆',
//     gender: '男',
//     age: "18",
//     ethnic: '汉',
//     show: true,
//     show3: false,
//     //上传图片
//     imageURL: '',

//   }
// }

</script>




<style scoped>
* {
  padding: 0px;
  margin: 0px;
}

ul li {
  list-style: none;
  line-height: 50px;
}

#Card {
  margin-top: 20px;
  position: absolute;
  width: 350px;
  height: 300px;
  background-color: #fffbe0;
  margin-left: 300px;
  border-radius: 20px;
  opacity: .6;
  box-shadow: 1px 1px 2px 1px;
}

#button {

  position: absolute;
  margin-top: 20px;
  margin-left: 540px;

}


.transition-box {
  position: absolute;
  width: 300px;
  height: 290px;
  border-radius: 20px;
  background-color: slategray;
  text-align: center;
  color: #fafafa;
  padding: 20px 20px;
  margin-top: 3px;
  opacity: .7;
}


.box {
  margin-top: 20px;
  border-radius: 25px;
  position: absolute;
  background-color: floralwhite;
  height: 400px;
  width: 1000px;
  margin-left: 250px;
  opacity: .5;
  box-shadow: 3px 3px 3px 3px;
}

/*局部跳转样式*/
.box2 {
  border-radius: 10px;
  position: absolute;
  margin-top: 430px;
  height: 280px;
  width: 1000px;
  margin-left: 250px;
  background-color: honeydew;
  opacity: .5;
  box-shadow: 4px 4px 4px 4px;
  overflow: auto;
}

/*顶部样式*/
.box3 {
  margin-left: -5px;
  border-radius: 25px;
  height: 50px;
  width: 1480px;
  background-color: #fffbe0;
  opacity: .5;
  box-shadow: 2px 2px 2px 2px;
}


.el-icon-s-home {
  position: absolute;
  margin-left: 20px;
}

.el-icon-user-solid {
  position: absolute;
  margin-left: 1380px;
}



/*  收藏作品样式*/
.box4 {
  border-radius: 20px;
  position: absolute;
  width: 150px;
  margin-left: 80px;
  height: 280px;
  margin-top: 430px;
  background-color: honeydew;
  opacity: .8;
  box-shadow: 1px 1px 1px 1px;
}




.el-icon-upload {
  margin-top: 120px;

}

.el-icon-star-off {
  margin-top: 30px;

}

/*头像布局样式*/
.box5 {
  border-radius: 30px;
  position: absolute;
  margin-left: 25px;
  margin-top: 50px;
  height: 200px;
  width: 200px;
  /* background-color: floralwhite; */
}


/*上传按钮*/
.box6 {
  border-radius: 50%;
  position: absolute;
  height: 50px;
  width: 50px;
  margin-top: 260px;
  margin-left: 150px;
  background-color: beige;
  opacity: .5;
}

/*  上传头像样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}


.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.all {
  position: absolute;
  width: 1488px;
  height: 788px;
  background-color: #c7b8bb;
  opacity: .3;
  margin-left: -8px;
  margin-top: -8px;
}
</style>
